<template>
  <div class="register">
    <header>
      <img src="../../public/1.png" alt="" />
    </header>
    <van-form @submit="onSubmit">
      <van-field v-model="tel" placeholder="请输入手机号" type="tel">
        <template #button>
          <van-button size="small" color="#da5c2a">获取验证码</van-button>
        </template>
      </van-field>
      <van-field
        v-model="sms"
        center
        clearable
        placeholder="请输入短信验证码"
      />
      <div class="box">
        <p>*未注册的手机号将自动注册</p>
        <p @click="$router.push('login')">使用密码登录</p>
      </div>
    </van-form>
    <div style="margin: 16px">
      <van-button
        round
        block
        color="linear-gradient(to right, #ff944b, #fc5500)"
        native-type="submit"
        @click="add"
        >登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { Field, Button, Form, } from "vant";
import { SmsVerification,login } from "../request/http";
export default {
  data() {
    return {
      tel: "",
      sms: "",
    };
  },
  methods: {
    onSubmit() {
      console.log(this.tel);
      SmsVerification({ mobile: this.tel, sms_type: "login" }).then((res) => {
        console.log(res);
      });
      },
      add() {
          login({mobile:this.tel,type:2,client:1,sms_code:this.sms}).then(res => {
              console.log(res);
            this.$router.push('/setPassword')
        })
    }
  },
  created() {},
  mounted() {},
  components: {
    [Field.name]: Field,
    [Button.name]: Button,
    [Form.name]: Form,
  },
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.register {
  background-color: #fff;
  height: 100vh;
}
header {
  width: 100%;
  text-align: center;
  img {
    width: 80%;
    margin: 80px 0;
  }
}
.van-form {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px;
  .box {
    display: flex;
    justify-content: space-around;
    p {
      flex: 1;
      text-align: center;
      color: #999999;
      font-size: 0.35rem;
    }
  }
}
</style>
